{% extends "park/base.html" %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/images/skin/minimal/blue.css">
    <link rel="stylesheet" type="text/css" href="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapi/js/dojo/dijit/themes/claro/claro.css">
{% endblock %}

{% block content %}
<script type="text/javascript">
    var primary_menu = "menu_0";
    var sub_menu = "menu_0_1";
</script>

    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h3>地理位置</h3>
                </div>
                <!-- <div class="panel-title">
                    <label >企业地图中心点经度</label>
                        <input name="geo_x" id="geo_x" style="margin-top: 10px;padding: 0px; height: 22px;width: 150px" type="text" class="form-control">
                </div>
                <div class="panel-title">
                    <label >企业地图中心点纬度</label>
                    <input name="geo_x" id="geo_y" style="margin-top: 10px;padding: 0px; height: 22px;width: 150px" type="text" class="form-control">
                </div> -->

                <div class="panel-options">
                    <a href="/park/mapEdit/" class="bg"><button type="button" class="btn btn-info">修改</button></a>
                </div>
            </div>

            <div class="panel-body" style="padding: 0px">
                <div data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="false" style="position:relative;width:100%; height:600px;">
                    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden; height:600px;">
                        <div id="osmCopy" style="position:absolute; color:black;font-weight:bold;right:10px; bottom:10px; z-Index:999;"></div>
                    </div>
                </div>
                <div class="mapEdit">
                     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                                <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="collapse_h1">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" onclick="listCompany();" href="#collapse_c1" onclick="" aria-expanded="true" aria-controls="collapse_c1">
                                  企业列表
                                  <i class="entypo-down-open pull-right"></i>
                                </a>
                              </h4>
                            </div>
                            <div id="collapse_c1" class="panel-collapse collapse off" role="tabpanel" aria-labelledby="collapse_h2">
                                <div class="panel-body">
                                    <div class="resultList">
                                    <div>
                                            <table class="table table-bordered" >
                                                <thead id="thead_5">
                                                </thead>
                                                <tbody id="Searchresult5" >
                                                </tbody>
                                            </table>
                                        <div id="Pagination5"  >
                                        </div>
                                    </div>
                                    </div>
                                    <!--================================-->
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="collapse_h2">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse_c2" aria-expanded="true" aria-controls="collapse_c2">
                                  生产区及贮罐区
                                  <i class="entypo-down-open pull-right"></i>
                                </a>
                              </h4>
                            </div>
                            <div id="collapse_c2" class="panel-collapse collapse off" role="tabpanel" aria-labelledby="collapse_h2">
                                <div class="panel-body">
                                    <!--================================-->
                                    <div class="">
                                        <ul>
                                            <li>
                                                <input data='production'  type="checkbox">
                                                <span>生产区</span>    <!--接着上一行-->
                                            </li>
                                            <li>
                                                <input data='storage'  type="checkbox">
                                                <span>储罐区</span>    <!--接着上一行-->
                                            </li>
                                        </ul>
                                    </div>
                                    <!--================================-->
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="collapse_h3">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse_c3" aria-expanded="true" aria-controls="collapse_c3">
                                  化学物质信息
                                  <i class="entypo-down-open pull-right"></i>
                                </a>
                              </h4>
                            </div>
                            <div id="collapse_c3" class="panel-collapse collapse off" role="tabpanel" aria-labelledby="collapse_h3">
                                <div class="panel-body">
                                    <!--================================-->
                                    <div class="">
                                        <form method="post" action="">
                                            <input id="chemical_0"  type="text" class="form-control"/>
                                            <a onclick="selectCompanyIds('chemical_0');" href="#" class="btn btn-info">查询</a>
{#                                            <a onclick="selectCompany();" href="#" class="btn btn-info">查询</a>#}
                                        </form>
                                    </div>
                                    <hr/>
                                    <div class="resultList">
                                    <div>
                                            <table class="table table-bordered">
                                                <thead id="thead_0" >
                                                </thead>
                                                <tbody id="Searchresult0" >
                                                </tbody>
                                            </table>
                                        <div class="paginationC" id="Pagination0"  >
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="collapse_h4">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse_c4" aria-expanded="true" aria-controls="collapse_c4">
                                  原辅料
                                  <i class="entypo-down-open pull-right"></i>
                                </a>
                              </h4>
                            </div>
                            <div id="collapse_c4" class="panel-collapse collapse off" role="tabpanel" aria-labelledby="collapse_h4">
                                <div class="panel-body">
                                    <!--================================-->
                                    <div class="">
                                        <form method="post" action="">
                                            <input id="material_1"  type="text" class="form-control"/>
                                            <a onclick="selectCompanyIds('material_1');" href="#" class="btn btn-info">查询</a>
                                        </form>
                                    </div>
                                    <hr/>
                                    <div class="resultList">
                                        <div>
                                            <table class="table table-bordered">
                                                <thead id="thead_1" >
                                                </thead>
                                                <tbody id="Searchresult1" >
                                                </tbody>
                                            </table>
                                            <div class="paginationC" id="Pagination1"  >
                                            </div>
                                        </div>
                                    </div>
                                    <!--================================-->
                                </div>
                            </div>
                        </div>
                        <!-- <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="collapse_h5">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse_c5" aria-expanded="true" aria-controls="collapse_c5">
                                  主副产品
                                  <i class="entypo-down-open pull-right"></i>
                                </a>
                              </h4>
                            </div> -->
                            <!-- <div id="collapse_c5" class="panel-collapse collapse off" role="tabpanel" aria-labelledby="collapse_h5">
                                <div class="panel-body">
                                    <!--================================-->
                                    <!-- <div class="">
                                        <form method="post" action="">
                                            <input id="main_2"  type="text" class="form-control"/>
                                            <a onclick="selectCompanyIds('main_2');" href="#" class="btn btn-info">查询</a>
                                        </form>
                                    </div>
                                    <hr/>
                                    <div class="resultList">
                                        <div>
                                            <table class="table table-bordered">
                                                <thead id="thead_2" >
                                                </thead>
                                                <tbody id="Searchresult2" >
                                                </tbody>
                                            </table>
                                            <div class="paginationC" id="Pagination2"  >
                                            </div>
                                        </div>
                                    </div>
                                    <!--================================-->
                            <!--     </div>
                            </div> 
                        </div> -->
<!--                         <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="collapse_h6">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse_c6" aria-expanded="true" aria-controls="collapse_c6">
                                  重点化学污染物
                                  <i class="entypo-down-open pull-right"></i>
                                </a>
                              </h4>
                            </div>
                            <div id="collapse_c6" class="panel-collapse collapse off" role="tabpanel" aria-labelledby="collapse_h6">
                                <div class="panel-body">
                                    <!--================================-->
                                   <!--  <div class="">
                                        <form method="post" action="">
                                            <input id="key_3"  type="text" class="form-control"/>
                                            <a onclick="selectCompanyIds('key_3');" href="#" class="btn btn-info">查询</a>
                                        </form>
                                    </div>
                                    <hr/>
                                    <div class="resultList">
                                        <div>
                                            <table class="table table-bordered">
                                                <thead id="thead_3" >
                                                </thead>
                                                <tbody id="Searchresult3" >
                                                </tbody>
                                            </table>
                                            <div class="paginationC" id="Pagination3">
                                            </div>
                                        </div>
                                    </div>
                                    <!--================================-->
                          <!--       </div>
                            </div>
                        </div> --> 
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="collapse_h7">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse_c7" aria-expanded="true" aria-controls="collapse_c7">
                                  特征化学污染物
                                  <i class="entypo-down-open pull-right"></i>
                                </a>
                              </h4>
                            </div>
                            <div id="collapse_c7" class="panel-collapse collapse off" role="tabpanel" aria-labelledby="collapse_h7">
                                <div class="panel-body">
                                    <!--================================-->
                                    <div class="">
                                        <form method="post" action="">
                                            <input id="special_4"  type="text" class="form-control"/>
                                            <a onclick="selectCompanyIds('special_4');" href="#" class="btn btn-info">查询</a>

                                        </form>
                                    </div>
                                    <hr/>
                                    <div class="resultList">
{#                                        显示数据#}
                                        <div>
                                            <table class="table table-bordered">
                                                <thead id="thead_4" >
                                                </thead>
                                                <tbody id="Searchresult4" >
                                                </tbody>
                                            </table>
                                            <div class="paginationC" id="Pagination4"  >
                                            </div>
                                        </div>
                                    </div>
                                    <!--================================-->
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
<script type="text/javascript" src="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapi/init.js"></script>
<script type="text/javascript" src="/static/js/icheck.js"></script><!--选择条目 j-->
<script language="javascript">
    var es = [];
    var eps = [];
    {% for e in geo_data %}
        eps = eps.concat([['{{ e.e.name }}','{{ e.e.id }}']]);
        es = es.concat({
            'id': '{{ e.e.id }}',
            'name': '{{ e.e.name }}',
            'points': JSON.parse('{{ e.points }}'),
            'center': JSON.parse('{{ e.center }}'),
            'extent': '{{ e.extent | safe }}',
            'production':(function(){
                var ps = []
                    {% for p in e.ps %}
                        ps = ps.concat({
                            'name': '{{ p.id }}',
                            'center': JSON.parse('{{ p.mapdata.getObj.center_point }}'),
                            'points': JSON.parse('{{ p.mapdata.getObj.points }}'),
                            'key': '{{ p.mapdata.mapData_type.key }}'
                        })
                    {% endfor %}
                return ps;
            })(),
            'storage':(function(){
                var ss = []
                    {% for s in e.ss %}
                        ss = ss.concat({
                            'name': '{{ s.id }}',
                            'center': JSON.parse('{{ s.mapdata.getObj.center_point }}'),
                            'points': JSON.parse('{{ s.mapdata.getObj.points }}'),
                            'key': '{{ p.mapdata.mapData_type.key }}'
                        })
                    {% endfor %}
                return ss;
            })()
        })


    {% endfor %}
    eps_ = eps;

    var geo_points = '{{ p.geo_points }}';
    var geo_center_point = '{{ p.geo_center_point }}';
    var p_extent = '{{ p.geo_extent | safe }}';

    if(geo_center_point){
        geo_center_point = eval(geo_center_point);
        $('#geo_x').val(geo_center_point[0]);
        $('#geo_y').val(geo_center_point[1]);
    }

    if(geo_points) geo_points = eval(geo_points);
    if(p_extent) p_extent = JSON.parse(p_extent);
    graList = [];
    textList = [];
    members =[];
</script>
<script type="text/javascript" src="/static/js/map.action.companyInfo.js"></script>
<script language="javascript">
    $(function(){
        $('input[type = checkbox]').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });

        $('input[type=checkbox]').bind('ifClicked',function(event){
            var _flag = this.checked;     <!--select-->
            var _dataKey = this.getAttribute('data');   <!--store  key store-->
            var _graphics = mymap.graphics.graphics;     <!--map-->
            for(var i=0; i<_graphics.length; i++){
                var _itemGraph = _graphics[i];
                if(_itemGraph.attributes){
                    if( _itemGraph.attributes.name == _dataKey){
                        if(_flag){
                            _graphics[i].hide();
                        }else{
                            _graphics[i].show();
                        }
                    }
                }
            }
        })
    })
    function getNextElement (field) {
        var form = field.form;
        for (var e = 0; e < form.elements.length; e++)
            if (field == form.elements[e])
                break;
        return form.elements[++e % form.elements.length];
    }
    function tabOnEnter (field, evt) {
        var keyCode = document.layers ? evt.which : document.all ?
                evt.keyCode : evt.keyCode;
        if (field.value.length == 1){
            getNextElement(field).focus();
            return false;
        }
    }
    function selectCompanyIds(id_index){
        //五类搜索对应的url
        var urls = [ ' /chemicals/productListAjax/',
        ' /chemicals/materialListAjax/',
        ' /chemicals/chemicalsListAjax/',
        '/pollution/release_transfer/transferListAjax/',
        '/pollution/other/chemicalsListAjax/'];
        var index = id_index.substring(id_index.length-1);
        var name = document.getElementById(id_index).value;
        if(!name){
            alert('请填写要查询的物质名称');
            return;
        }
        var url =urls[index];
        var _param = {
            'name':name
        }
        $.ajax({
            url:url,
            type:'post',
            dataType:'json',
            data:_param,
            success:function(list){
                var len = list.length;
                members.length = 0;
                if(len){
                   //将特定企业地图显示出来
                   //bak = {"name":i[0],"id":i[1],"count":i[2],"geo_points":i[3],"geo_center_point":i[4]}
                    for(var l_index=0;l_index<len;l_index++){
                        members.push([list[l_index].name,list[l_index].count,list[l_index].id]);
                    }
                    loadCompanyData(list,name);
                    selectCompany(name,id_index);
                }
                else{
                    alert("没有符合查询条件的信息");
                }
            }
        })
    }
    //化学品名字，数据
    function loadCompanyData(ents,name_){
        var es = ents;
        var solidColor = [0,187,255],
            fillColor = [0,187,255,255],
            fill_color = [0,187,255,64];
        for(var index=0;index<graList.length;index++){
            graList[index].hide();
            //graList.remove(index);
            textList[index].hide();
            //textList.remove(index);
            graList.length = 0;
            textList.length = 0;
        }

        for(var i=0; i<es.length; i++){
            var item = es[i];
            if(!item.geo_points) continue;
            var entPoints = eval(item.geo_points);
            var entCenterPoint = '';
            var entName = item.name;
            //要展示的数据
            var riskInfo = '';
            riskInfo += name_+"存量:" +  item.count;
            var myPolygon = {
                "attributes":{
                    "name": item.id,
                    "extent": item.geo_extent
                },
                "geometry":{
                    "rings":[ entPoints ],
                    "spatialReference": { "wkid": 102100 }
                },
                "symbol":{
                    "color":fill_color,
                    "outline":{
                        "color":fillColor,
                        "width":2,
                        "type":"esriSLS",
                        "style":"esriSLSSolid"
                    },
                    "type":"esriSFS",
                    "style":"esriSFSSolid"
                },
                "infoTemplate":{
                    "title":entName,
                    "content":"<div>"+ riskInfo +"</div>"
                }
            };
            // 初始化单元图层对象
            //地图已加载话，就不用再加载一次
            var gra = new esri.Graphic(myPolygon);
            // 获得当前单元图层中心点
            var entCenterPoint=gra.geometry.getExtent().getCenter();
            var font = new esri.symbol.Font("14px", esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL, esri.symbol.Font.WEIGHT_BOLDER);
            var textSymbol = new esri.symbol.TextSymbol(entName, font, new dojo.Color([255, 255, 0]));
            var textLable = new esri.Graphic(entCenterPoint, textSymbol, null, null);
            textLable.attributes = { name:entName };
            graList.push(gra);
            textList.push(textLable);
            mymap.graphics.add(gra);
            mymap.graphics.add(textLable);
        }
        return true;
        // 初始化单元图层对象
        var gra = new esri.Graphic(myPolygon);
        // 获得当前单元图层中心点
        var centerPoint=gra.geometry.getExtent().getCenter();
        // 先添加单元图层
        mymap.graphics.add(gra);
    }

</script>
<script type="text/javascript">

function pageselectCallback(page_index, jq){
    // Get number of elements per pagionation page from form
    var items_per_page = 5;
    var max_elem = Math.min((page_index+1) * items_per_page, members.length);
    var newcontent = '<tr>';
    // Iterate through a selection of the content and build an HTML string
    for(var i=page_index*items_per_page;i<max_elem;i++)
    {
        newcontent += '<td ' +'onclick="highLight('+members[i][2]+');"' +'>' + members[i][0] + '</td>';
        newcontent += '<td >' + members[i][1] + '</td>';
        newcontent += '</tr>';
    }
    // Replace old content with new content
    $('#Searchresult'+optInit['index']).html(newcontent);

    // Prevent click event propagation
    return false;
}
function getOptionsFromForm(){
    var opt = {callback: pageselectCallback};
    // Collect options from the text fields - the fields are named like their option counterparts
    opt.num_display_entries = 10;
    opt.num_edge_entries = 0;
    opt.items_per_page = 5;
    opt.prev_text = '上一页';
    opt.next_text = '下一页';

    return opt;
}
// When document has loaded, initialize pagination and form
function selectCompany(name,index_){
    var index  = index_.substring(index_.length-1);
    optInit = getOptionsFromForm();
    optInit['index'] = index
    $("#Pagination"+optInit['index']).pagination(members.length, optInit);
    //第一次可以调用展示第一页数据
    var newthead = '<tr>';
    newthead+= '<th >' + '企业名称'+ '</th>';
    newthead+= '<th >' + name+'存量:' + '</th>';
    newthead += '</tr>';
    var newcontent = '<tr>';

    if(members.length>5){
        for(var i=0;i<5;i++)
        {
            newcontent += '<td ' +'onclick="highLight('+members[i][2]+');"' +'>' + members[i][0] + '</td>';
            newcontent += '<td >' + members[i][1] + '</td>';
            newcontent += '</tr>';
        }
    }else{
        for(var i=0;i<members.length;i++)
        {
            newcontent += '<td ' +'onclick="highLight('+members[i][2]+ ');"' +'>' + members[i][0] + '</td>';
            newcontent += '<td >' + members[i][1] + '</td>';
            newcontent += '</tr>';
        }
    }
    // Replace old content with new content
    $('#thead_'+optInit['index']).html(newthead);
    $('#Searchresult'+optInit['index']).html(newcontent);
}
function highLight(id){

    //到地图列查找，将它改变颜色
    for(var i=0;i<graList.length;i++){
        if(id==graList[i]['attributes']['name']){
            graList[i]['symbol']['color']['g']=20;
            graList[i]['symbol']['color']['r']=255;
            graList[i]['symbol']['color']['b']=25;
            graList[i]['symbol']['outline']['color']['r']=255;
            graList[i]['symbol']['outline']['color']['g']=0;
            graList[i]['symbol']['outline']['color']['b']=0;
            changMapColor(graList[i]['attributes']['extent']);
        }else{
            graList[i]['symbol']['color']['g']=187;
            graList[i]['symbol']['color']['r']=0;
            graList[i]['symbol']['color']['b']=255;
            graList[i]['symbol']['outline']['color']['r']=0;
            graList[i]['symbol']['outline']['color']['g']=187;
            graList[i]['symbol']['outline']['color']['b']=255;
        }
    }
}

function changMapColor(e){
    if(!e) return false;

    var extent = JSON.parse(e);

    reExtent = new esri.geometry.Extent({
        "xmin":extent.XMin,
        "ymin":extent.YMin,
        "xmax":extent.XMax,
        "ymax":extent.YMax,
        "spatialReference":{
            "wkid":54032
        }
    });
    mymap.setExtent(reExtent);//区域范围
}

function listCompany(){
    optInit = getOptionsFromForm_();
    $("#Pagination5").pagination(eps_.length, optInit);
    //第一次可以调用展示第一页数据
    var newthead = '<tr>';
    newthead+= '<td >' +'企业列表:' +'</td>';
    //newthead+= '<td >'  + '</td>';
    newthead += '</tr>';
    var newcontent = '<tr>';
    if(eps_.length>5){
        for(var i=0;i<5;i++)
        {
            newcontent += '<td onclick="highLight('+ eps_[i][1] +');">' + eps_[i][0] + '</td>';
           // newcontent += '<td ' +'</td>';
            newcontent += '</tr>';
        }
    }else{
        for(var i=0;i<eps_.length;i++)
        {
            newcontent += '<td onclick="highLight('+ eps_[i][1] +');">' + eps_[i][0] + '</td>';
            //newcontent += '<td ' + '</td>';
            newcontent += '</tr>';
        }
    }
    // Replace old content with new content
    $('#thead_5').html(newthead);
    $('#Searchresult5').html(newcontent);
}

function pageselectCallback_(page_index, jq){
    //alert(page_index)
    // Get number of elements per pagionation page from form
    var items_per_page = 5;
    var max_elem = Math.min((page_index+1) * items_per_page, eps_.length);
    var newcontent = '<tr>';
    // Iterate through a selection of the content and build an HTML string
    for(var i=page_index*items_per_page;i<max_elem;i++)
    {
        newcontent += '<td >' + eps_[i][0] + '</td>';
       // newcontent += '<td ' + '</td>';
        newcontent += '</tr>';
    }
    $('#Searchresult5').html(newcontent);
    return false;
}

function getOptionsFromForm_(){
    var opt = {callback: pageselectCallback_};
    opt.num_display_entries = 10;
    opt.num_edge_entries = 0;
    opt.items_per_page = 5;
    opt.prev_text = '上一页';
    opt.next_text = '下一页';
    return opt;
}

</script>
{% endblock %}